const Lang     = imports.lang;
const Mx       = imports.gi.Mx;
const Signals  = imports.signals;

const ICONSIZE = 20;

function BottomPanel(container) {
	this._init(container);
}

BottomPanel.prototype = {
	_init: function (container) {
		this.bottomPanelStack = new Mx.Stack ({ name: 'bottomPanel-background' });
		container.add_child (this.bottomPanelStack);

		this.bottomPanelHBox = new Mx.BoxLayout ({ style_class: 'bottomPanel-hbox',
		                                           orientation: Mx.Orientation.HORIZONTAL });
		this.bottomPanelStack.add_child (this.bottomPanelHBox);

		this.bottomPanelMenu = new Mx.Button ({ style_class: 'bottomPanel-menu',
		                                        width: ICONSIZE,
		                                        height: ICONSIZE });
		this.bottomPanelHBox.add_child (this.bottomPanelMenu);
		this.bottomPanelMenu.connect ('clicked', Lang.bind(this, function () {
			this.bottomPanelRefresh.visible = !this.bottomPanelRefresh.visible;
			this.bottomPanelFullscreen.visible = !this.bottomPanelFullscreen.visible;
			this.bottomPanelQuit.visible = !this.bottomPanelQuit.visible;
		}));
		this.bottomPanelMenu.connect ('enter-event', Lang.bind(this, function () {
			this.setText ("menu");
		}));
		this.bottomPanelMenu.connect ('leave-event', Lang.bind(this, function () {
			this.setText ("");
		}));
		this.bottomPanelRefresh = new Mx.Button ({ style_class: 'bottomPanel-refresh',
		                                           width: ICONSIZE,
		                                           height: ICONSIZE,
		                                           visible: false });
		this.bottomPanelHBox.add_child (this.bottomPanelRefresh);
		this.bottomPanelRefresh.connect ('clicked', Lang.bind(this, function () {
			this.emit ('refresh-album-list');
		}));
		this.bottomPanelRefresh.connect ('enter-event', Lang.bind(this, function () {
			this.setText ("refresh albumlist");
		}));
		this.bottomPanelRefresh.connect ('leave-event', Lang.bind(this, function () {
			this.setText ("");
		}));
		this.bottomPanelFullscreen = new Mx.Button ({ style_class: 'bottomPanel-fullscreen',
		                                              width: ICONSIZE,
		                                              height: ICONSIZE,
		                                              visible: false });
		this.bottomPanelHBox.add_child (this.bottomPanelFullscreen);
		this.bottomPanelFullscreen.connect ('clicked', Lang.bind(this, function () {
			this.emit ('toggle-fullscreen');
		}));
		this.bottomPanelFullscreen.connect ('enter-event', Lang.bind(this, function () {
			this.setText ("toggle fullscreen");
		}));
		this.bottomPanelFullscreen.connect ('leave-event', Lang.bind(this, function () {
			this.setText ("");
		}));

		this.bottomPanelQuit = new Mx.Button ({ style_class: 'bottomPanel-quit',
		                                        width: ICONSIZE,
		                                        height: ICONSIZE,
		                                        visible: false });
		this.bottomPanelHBox.add_child (this.bottomPanelQuit);
		this.bottomPanelQuit.connect ('clicked', Lang.bind(this, function () {
			this.emit ('quit');
		}));
		this.bottomPanelQuit.connect ('enter-event', Lang.bind(this, function () {
			this.setText ("quit");
		}));
		this.bottomPanelQuit.connect ('leave-event', Lang.bind(this, function () {
			this.setText ("");
		}));

		this.bottomPanelLabel = new Mx.Label ({ style_class: 'bottomPanel-label' });
		this.bottomPanelHBox.add_child (this.bottomPanelLabel);

		this.bottomPanelOverlay = new Mx.Frame ({ name: 'bottomPanel-overlay' });
		this.bottomPanelStack.add_child (this.bottomPanelOverlay);
	},

	setText: function (msg) {
		this.bottomPanelLabel.text = msg;
	}
};

Signals.addSignalMethods(BottomPanel.prototype);
